<ion-view title="所有分类">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon ion-navicon"></button>
  </ion-nav-buttons>

  <ion-nav-buttons side="right">
    <button class="button button-icon ion-ios7-plus-empty" ng-click="add()"></button>
    <button class="button button-icon ion-ios7-search" ng-click="search()"></button>
    <button class="button button-icon ion-ios7-more"
            ns-popover
            ns-popover-template="moreMenu"
            ns-popover-trigger="click"
            ns-popover-theme="ns-popover-list-theme"
            ns-popover-placement="bottom|right"
            ns-popover-timeout="2"></button>
  </ion-nav-buttons>

  <ion-content class="has-header">

    <div class="list" ng-show="!playlists.length">
      <div class="row">
        <div class="col col-offset-33">暂时还没有任务安排！</div>
      </div>
    </div>

    <div class="list" id="playlist" ng-show="playlists.length">
      <div class="item item-checkbox" 
        ng-repeat="playlist in playlists" 
        ng-click="show({{playlist.id}})"
        ng-show="playlists.length">
        <label class="checkbox {{playlist.classname}}" style="width:48px;">
          <input type="checkbox" ion-stop-event ng-click="finish({{playlist.id}}, $event);">
        </label>
        {{playlist.title | limitTo:12}} <span class="badge">{{playlist.date | displayDate}}</span>
      </div>
    </div>
  </ion-content>

  <ion-footer-bar class="bar-stable">
    <div class="tabs tabs-icon-top">
      <a class="tab-item active">
        <i class="icon ion-calendar"></i>
        所有记事
      </a>
      <a class="tab-item">
        <i class="icon ion-star"></i>
        重要记事
      </a>
      <a class="tab-item">
        <i class="icon ion-gear-a"></i>
        设置
      </a>
    </div>
  </ion-footer-bar>
</ion-view>

<script type="text/ng-template" id="moreMenu">
  <div class="triangle"></div>
  <div class="ns-popover-tooltip" style="width:140px;">
    <div class="list" style="margin-top:0;margin-bottom:0;">
      <a class="item" ng-click="hidePopover();sort();"> 排序 </a>
      <a class="item" ng-click="hidePopover();search();"> 显示模式 </a>
    </div>
  </div>
</script>